<template>
	<view>
		<view class="dossier-header">
			<view class="layout">
				<view class="dossier-header-backup" @click="handleButtonBack()">
					<image src="/static/icon/icon-prev.png"></image>
				</view>
				<view class="dossier-header-menu">
					<view class="layout">
						<view class="dossier-header-menu-item">
							<view class="dossier-header-menu-actived">视频</view>
						</view>
						<view class="dossier-header-menu-item">
							<view>图集</view>
						</view>
						<view class="dossier-header-menu-item">
							<view>口碑</view>
						</view>
						<view class="dossier-header-menu-item">
							<view>详情</view>
						</view>
					</view>
				</view>
				<view class="dossier-header-collection">
					<image src="/static/icon/icon-collection.png"></image>
				</view>
				<view class="dossier-header-share">
					<image src="/static/icon/icon-share.png"></image>
				</view>
			</view>
		</view>
		<view class="dossier-flash">
			<swiper class="dossier-flash-swiper" circular indicator-dots="5" :autoplay="true" :interval="2000"
							:duration="500">
				<swiper-item v-for="(flash,index) in productData.attach" :key="index">
					<view class="dossier-flash-swiper-item">
						<image :src="flash"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="dossier-basic">
			<view class="dossier-basic-price">
				<view class="layout">
					<view class="dossier-basic-price-newest">￥<text>{{productData.productPrice}}</text></view>
					<view class="dossier-basic-price-original">￥{{productData.originalPrice}} 市场价</view>
				</view>
			</view>
			<view class="dossier-basic-title">{{productData.productName}}</view>
			<view class="dossier-basic-sell">已售{{productData.orderNum}}</view>
		</view>
		<view class="dossier-property">
			<view class="dossier-property-block">
				<view class="layout">
					<view class="dossier-property-block-tooltip">选择</view>
					<view class="dossier-property-block-text">
						<view class="dossier-property-block-text-block">
							<view class="layout">								
								<view class="dossier-property-block-text-block-box">
									<view class="layout">
										<view class="dossier-property-block-text-block-box-item">
											<image src="/static/logo.png"></image>
										</view>
										<view class="dossier-property-block-text-block-box-item">
											<image src="/static/logo.png"></image>
										</view>
										<view class="dossier-property-block-text-block-box-item">
											<image src="/static/logo.png"></image>
										</view>
										<view class="dossier-property-block-text-block-box-item">
											<image src="/static/logo.png"></image>
										</view>
										<view class="dossier-property-block-text-block-box-item">
											<image src="/static/logo.png"></image>
										</view>
										<view class="dossier-property-block-text-block-box-item">
											<image src="/static/logo.png"></image>
										</view>
									</view>
								</view>
								<view class="dossier-property-block-text-block-volume">共9款</view>
							</view>
						</view>
						<view class="dossier-property-block-text-seclected">
							已选：精选A款 柴烧自动15件套 家用款，1件，可选服务
						</view>
					</view>
					<view class="dossier-property-block-icon">
						<image src="/static/icon/icon-next.png"></image>
					</view>
				</view>
			</view>
			<view class="dossier-property-block">
				<view class="layout">
					<view class="dossier-property-block-tooltip">配送</view>
					<view class="dossier-property-block-text">
						<view>18:00前下单，预计08月26日(周一)送达</view>
						<view>
							<view>		
								<view class="layout">									
									<view>重庆市南岸区长生桥镇丁香路6号</view>
									<view>包邮</view>
								</view>
							</view>
							<view>
								<view>京东物流.预约送货.隔日达</view>
							</view>
						</view>
					</view>
					<view class="dossier-property-block-icon">
						<image src="/static/icon/icon-next.png"></image>
					</view>
				</view>
			</view>
			<view class="dossier-property-block">
				<view class="layout">
					<view class="dossier-property-block-tooltip">服务</view>
					<view class="dossier-property-block-text">
						<view class="layout flex-wrap">					
							<view class="dossier-property-block-text-item">
								<view class="layout">									
									<view class="dossier-property-block-text-item-icon">
										<image src="/static/icon/icon-selected.png"></image>
									</view>
									<view class="dossier-property-block-text-item-tooltip">7天无理由退货</view>
								</view>
							</view>				
							<view class="dossier-property-block-text-item">
								<view class="layout">									
									<view class="dossier-property-block-text-item-icon">
										<image src="/static/icon/icon-selected.png"></image>
									</view>
									<view class="dossier-property-block-text-item-tooltip">180天可退可换</view>
								</view>
							</view>					
							<view class="dossier-property-block-text-item">
								<view class="layout">									
									<view class="dossier-property-block-text-item-icon">
										<image src="/static/icon/icon-selected.png"></image>
									</view>
									<view class="dossier-property-block-text-item-tooltip">先行理赔</view>
								</view>
							</view>
						</view>
					</view>
					<view class="dossier-property-block-icon">
						<image src="/static/icon/icon-next.png"></image>
					</view>
				</view>
			</view>
			<view class="dossier-property-block">
				<view class="layout">
					<view class="dossier-property-block-tooltip">活动</view>
					<view class="dossier-property-block-text">
						<view class="layout">							
							<view>开学季</view>
							<view>家装储值卡</view>
							<view>礼在京东</view>
							<view>80元立减金</view>
						</view>
					</view>
					<view class="dossier-property-block-icon">
						<image src="/static/icon/icon-next.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="dossier-content">
			<view class="dossier-content-tooltip">
				商品介绍
			</view>
			<view class="dossier-content-box">
				<rich-text :nodes="productData.productContent"></rich-text>
			</view>
		</view>
		<view class="dossier-button">
			<view class="layout">
				<view class="dossier-button-item">
					<view class="dossier-button-item-icon">
						<image src="/static/icon/icon-store.png"></image>
					</view>
					<view class="dossier-button-item-text">店铺</view>
				</view>
				<view class="dossier-button-item">
					<view class="dossier-button-item-icon">
						<image src="/static/icon/icon-services.png"></image>
					</view>
					<view class="dossier-button-item-text">客服</view>
				</view>
				<view class="dossier-button-item">
					<view class="fn-relat" @click="handleShoppingButton()">
						<view class="dossier-button-item-icon">
							<image src="/static/icon/icon-shopping.png"></image>
						</view>
						<view class="dossier-button-item-text">购物车</view>
						<view class="dossier-button-item-num">11</view>
					</view>
				</view>
				<view class="dossier-button-shopping-join" @click="handleShoppingJoinButton()">加入购物车</view>
				<view class="dossier-button-order" @click="handleOrderJoinButton()">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productID:0,
				productData:{
				}
			}
		},
		onLoad(options) {
			this.productID = options.productID;
		},
		onShow() {
			this.refreshProductDetail();
		},
		methods: {
			handleButtonBack:function(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			handleShoppingButton:function(){
				uni.switchTab({
					url:"/pages/transaction/shopping/shopping"
				})
			},
			refreshProductDetail:function(){
				let _this = this;
				let formData = {
					"productID":_this.productID
				}
				_this.$supply.getProductDetail(formData).then(res=>{
					console.log(res)
					if(res.code == 200){
						_this.productData = res.data;
					}
				})
			},
			handleShoppingJoinButton:function(){
				let _this = this;
				_this.$transaction.joinShopping({
					"productID":this.productData.ID,
					"productName":this.productData.productName,
					"productLogo":this.productData.productLogo,
					"productPrice":this.productData.productPrice,
					"originalPrice":this.productData.originalPrice
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						
					}else{
						uni.showToast({
							title:"加入失败",
							icon:"none"
						})
					}
				})
			},
			handleOrderJoinButton:function(){
				let _this = this;
				_this.$transaction.joinShopping({
					"productID":this.productData.ID,
					"productName":this.productData.productName,
					"productLogo":this.productData.productLogo,
					"productPrice":this.productData.productPrice,
					"originalPrice":this.productData.originalPrice
				}).then(res=>{
					if(res.code == 200){
						_this.$transaction.submitOrder({}).then(res=>{
							console.log(res)
							if(res.code == 200){
								uni.redirectTo({
									url:"/pages/transaction/confirm/confirm?orderID="+res.data.orderID
								})
							}else{
								uni.showToast({
									title:"下单失败",
									icon:"none"
								})
								
							}
						})
					}else{
						uni.showToast({
							title:"加入失败",
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style>
page { background: #ededed; padding-bottom: 150rpx; }
.dossier-header { position: fixed; top: var(--status-bar-height); left: 0; right: 0; z-index: 101; height: 50rpx; }
.dossier-header-backup { width: 40rpx; height:40rpx; }
.dossier-header-menu { background: #000; font-size: 14px; color: #fff; padding: 0 10rpx; border-radius: 40rpx; }
.dossier-header-menu-item { padding: 10rpx 15rpx; }
.dossier-header-menu-actived { background: #fff; color: #000; border-radius: 30rpx; padding: 0 10rpx; }
.dossier-header-collection { width: 40rpx; height: 40rpx; margin-left: 200rpx; }
.dossier-header-share { width: 40rpx; height: 40rpx; margin-left: 30rpx; }

.dossier-flash { height: 600rpx; z-index: 100; }
.dossier-flash-swiper { height: 600rpx; }
.dossier-flash-swiper-item { width: 750rpx; height: 600rpx; line-height: 600rpx; display: block; }


.dossier-basic { background: #fff; padding: 15rpx; padding-top: 50rpx; margin-bottom: 30rpx;  }
.dossier-basic { border-top-right-radius: 40rpx; border-top-left-radius: 40rpx; }

.dossier-basic-price {}
.dossier-basic-price-newest { color: red; font-size: 14px; padding-right: 25rpx; }
.dossier-basic-price-newest text { font-size: 22px; font-weight: 800; }
.dossier-basic-price-original { font-size: 14px; padding-top: 15rpx; font-weight: 900; color: #999; }
.dossier-basic-title { font-size: 18px; font-weight: bold; padding: 15rpx 0; }
.dossier-basic-sell { color: #999; font-size: 14px; text-align: left; }

.dossier-property { border-radius: 20rpx; background: #fff; padding: 15rpx; margin-bottom: 30rpx;}
.dossier-property-block-tooltip { font-size: 14px; color: #666; width: 200rpx; }
.dossier-property-block { padding: 15rpx 0; }
.dossier-property-block-icon { width: 30rpx; height: 30rpx; }
.dossier-property-block-text { width: 500rpx; min-height: 50rpx; }

.dossier-property-block-text-block-box { width: 420rpx;}
.dossier-property-block-text-block-box-item { width: 60rpx; height: 80rpx; margin-right: 10rpx; }
.dossier-property-block-text-block-box-item image { border-radius: 10rpx; }
.dossier-property-block-text-block-volume { font-size: 14px; height: 80rpx; line-height: 80rpx; }
.dossier-property-block-text-seclected { font-size: 14px; line-height: 25px; padding: 10rpx 0; }

.dossier-property-block-text-item { width: 240rpx; margin-bottom: 10rpx; }
.dossier-property-block-text-item-icon { width: 30rpx; height: 30rpx;}
.dossier-property-block-text-item-tooltip { font-size: 14px; }

.dossier-content { background: #fff; border-radius: 30rpx; }
.dossier-content-tooltip { padding: 30rpx 15rpx; font-size: 18px; font-weight: 600; }
.dossier-content-box { padding: 10rpx; }
.dossier-content-box img { width: 100%; }

.dossier-button { position: fixed; bottom: 0; left: 0; right: 0; }
.dossier-button { background: #fff; height: 70rpx; padding: 15rpx; }

.dossier-button-item { width: 98rpx; height: 70rpx; text-align: center; }

.dossier-button-item-icon { width:30rpx; height: 30rpx; margin: 0 auto; padding-bottom: 10rpx; }
.dossier-button-item-text { font-size: 12px; }

.dossier-button-item-num { position: absolute; right: 15rpx; top: 0; border: red 1px solid; }
.dossier-button-item-num { font-size: 10px; padding: 2rpx 5rpx; border-radius: 10rpx; color: red; }
.dossier-button-item-num { background: #fff; }
.

.dossier-button-shopping-join { background: #f4ea2a; color: #fff; border-radius: 30rpx; text-align: center;}
.dossier-button-shopping-join { padding: 15rpx 40rpx; margin-right: 25rpx; }
.dossier-button-order { background: red; color: #fff; border-radius: 30rpx; text-align: center; }
.dossier-button-order { padding: 15rpx 40rpx;}
</style>
